<template>
  <view class="trip-container">
    <text class="title">西安美景之旅</text>
    <view class="attraction-list">
      <view class="attraction-item" v-for="(attraction, index) in attractions" :key="index"
            @click="currentImage = attraction.image">
        <image class="attraction-image" :src="attraction.image" mode="aspectFill"></image>
        <text class="attraction-title">{{ attraction.title }}</text>
        <text class="attraction-description">{{ attraction.description }}</text>
        <button @click="toggleFavorite(attraction)" :class="{ 'favorite-btn': isFavorite(attraction) }">
          {{ isFavorite(attraction)? '已收藏' : '收藏' }}
        </button>
      </view>
    </view>

    <!-- 图片放大查看模态框 -->
    <view v-if="currentImage" class="modal" @click="currentImage = ''">
      <view class="modal-content">
        <image :src="currentImage" class="enlarged-image" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 收藏列表展示 -->
    <view v-if="favoriteAttractions.length > 0" class="favorite-list">
      <text class="favorite-title">我的收藏</text>
      <view class="favorite-item" v-for="(favorite, index) in favoriteAttractions" :key="index">
        <image class="favorite-image" :src="favorite.image" mode="aspectFill"></image>
        <text class="favorite-title">{{ favorite.title }}</text>
        <text class="favorite-description">{{ favorite.description }}</text>
        <button @click="toggleFavorite(favorite)">取消收藏</button>
      </view>
    </view>

    <view id="mapContainer" style="width: 100%; height: 400px; display: none"></view>
    <button v-if="showMap" @click="planRoute">到这里去</button>
    <button @click="goToFavoritesPage">查看收藏列表</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      attractions: [
        {
          id: 1,
          title: '兵马俑',
          description: '被誉为“世界第八大奇迹”的秦始皇兵马俑，是西安最著名的历史遗迹之一。',
          image: '/static/icon/兵马俑.jpg',
          longitude: 109.270692,
          latitude: 34.384003
        },
        {
          id: 2,
          title: '大雁塔',
          description: '大雁塔是唐代四方楼阁式砖塔，是西安的标志性建筑之一。',
          image: '/static/icon/大雁塔.jpg',
          longitude: 108.99609,
          latitude: 34.243535
        },
        {
          id: 3,
          title: '古城墙',
          description: '西安古城墙是中国现存规模最大、保存最完整的古代城垣。',
          image: '/static/icon/城墙.jpg',
          longitude: 108.95,
          latitude: 34.27
        },
        {
          id: 4,
          title: '华清池',
          description: '华清池以其温泉和风景秀丽而闻名，是中国古代皇家园林的代表之一。',
          image: '/static/icon/华清池.jpg',
          longitude: 109.202272,
          latitude: 34.384409
        },
        {
          id: 5,
          title: '钟鼓楼',
          description: '钟鼓楼是西安的标志性建筑，见证了古城的历史变迁。',
          image: '/static/icon/zhonglou.jpg',
          longitude: 108.948074,
          latitude: 34.273598
        },
        {
          id: 6,
          title: '回民街',
          description: '回民街是西安著名的美食街，汇集了各种地方特色小吃。',
          image: '/static/icon/回民街.jpg',
          longitude: 108.95,
          latitude: 34.27
        },
      ],
      currentImage: '',
      favoriteAttractions: [],
      showMap: false,
      currentPosition: [108.95, 34.27]
    };
  },
  methods: {
    toggleFavorite(attraction) {
      const index = this.favoriteAttractions.findIndex(fav => fav.id === attraction.id);
      if (index > -1) {
        this.favoriteAttractions.splice(index, 1);
      } else {
        this.favoriteAttractions.push(attraction);
      }
    },
    isFavorite(attraction) {
      return this.favoriteAttractions.some(fav => fav.id === attraction.id);
    },
    toggleDetails(location) {
      this.showMap = true;
    },
    initMap() {
      // 这里假设使用高德地图插件，需先引入并配置好插件，YOUR_AMAP_KEY需替换为真实申请的密钥
      const amapKey = 'YOUR_AMAP_KEY';
      const map = uni.createMapContext('mapContainer', this);
      return map;
    },
    planRoute() {
      const map = this.initMap();
      const targetLocation = this.getTargetLocation();
      if (targetLocation) {
        // 使用高德地图插件进行路线规划示例，具体方法可能需根据实际插件调整
        uni.$amap.driving({
          origin: {
            longitude: this.currentPosition[0],
            latitude: this.currentPosition[1]
          },
          destination: {
            longitude: targetLocation.longitude,
            latitude: targetLocation.latitude
          },
          success: (res) => {
            console.log('路线规划成功', res);
          },
          fail: (err) => {
            console.log('路线规划失败', err);
          }
        });
      }
    },
    getTargetLocation() {
      const selectedAttraction = this.attractions.find(attraction => {
        return this.showMap && (
          (this.favoriteAttractions.length > 0 && this.favoriteAttractions.some(fav => fav.id === attraction.id)) ||
          (this.currentImage && attraction.image === this.currentImage)
        );
      });
      if (selectedAttraction) {
        return {
          longitude: selectedAttraction.longitude,
          latitude: selectedAttraction.latitude
        };
      }
      return null;
    },
    goToFavoritesPage() {
      uni.navigateTo({
        url: '/pages/favorites/favorites'
      });
      // 也可以通过传参方式传递收藏数据，比如：
      // uni.navigateTo({
      //   url: `/pages/favorites/favorites?favoriteData=${JSON.stringify(this.favoriteAttractions)}`
      // });
    }
  },
  mounted() {
    // 可在此处进行一些初始化操作，比如地图初始化等
  }
};
</script>

<style lang="scss">
.trip-container {
  // max-width: 1200px;
  margin: 40px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  color: #333;
  font-family: Arial, sans-serif;
}

.title {
  text-align: center;
  color: #5e35b1;
  font-size: 3em;
  margin-bottom: 60px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.attraction-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.attraction-item {
  background-color: #f7f7f7;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.attraction-item:hover {
  transform: translateY(-5px);
}

.attraction-image {
  width: 100%;
  height: 200px;
}

.attraction-title {
  color: #333;
  font-size: 1.4em;
  margin: 20px 20px 10px;
  text-align: center;
  font-weight: bold;
}

.attraction-description {
  color: #666;
  font-size: 1em;

  padding: 0 20px 20px;
  text-align: center;
  line-height: 1.6;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  position: relative;
  cursor: zoom-out;
}

.enlarged-image {
  max-width: 80%;
  max-height: 80%;
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  cursor: zoom-out;
}

.favorite-list {
  margin-top: 30px;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.favorite-title {
  text-align: center;
  color: #5e35b1;
  font-size: 2em;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.favorite-item {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  margin-bottom: 20px;
  position: relative;
}

.favorite-item:hover {
  transform: translateY(-5px);
}

.favorite-image {
  width: 100%;
  height: 150px;
}

.favorite-title {
  color: #333;
  font-size: 1.2em;
  margin: 15px 15px 10px;
  text-align: center;
  font-weight: bold;
}

.favorite-description {
  color: #666;
  font-size: 0.9em;
  padding: 0 15px 15px;
  text-align: center;
  line-height: 1.4;
}

.favorite-btn {
  background-color: #5e35b1;
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

#mapContainer {
  margin-top: 30px;
}
</style>